<%@ page import="com.ychs.entity.Major" %>
<%@ page import="com.ychs.entity.College" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String id = request.getParameter("id");
    String name = request.getParameter("name");
    String code = request.getParameter("code");
    String collegeId = request.getParameter("college");
    Major major = new Major();
    major.setId(Integer.parseInt(id));
    major.setName(name);
    major.setCode(Integer.parseInt(code));
    College college = new College();
    college.setId(Integer.parseInt(collegeId));
    major.setCollege(college);
    pageContext.setAttribute("major",major);
%>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="layui-elem-field layui-field-title">
            <legend>添加专业</legend>
        </fieldset>
        <form class="layui-form" action="" id="majorModifyForm" lay-filter="majorModifyFormFilter">

            <input type="hidden" id="id" name="id">

            <div class="layui-form-item">
                <label class="layui-form-label">院系<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <select id="college" name="college" lay-filter="college" lay-verify="required" lay-reqtext="院系为必填项">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">专业名称<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input"
                           id="name" name="name"
                           lay-verify="required|name" placeholder="请输入专业名称"
                           autocomplete="off" lay-reqtext="专业名称为必填项">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">专业代号<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input"
                           id="code" name="code"
                           lay-verify="required|code" placeholder="请输入专业代号"
                           autocomplete="off" lay-reqtext="专业代号为必填项">
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" id="majorSaveBtn" class="layui-btn " lay-submit="" lay-filter="majorSaveBtn">修改院系</button>
                    <button type="button" id="majorResetBtn" class="layui-btn "  lay-filter="majorResetBtn">重置</button>
                </div>
            </div>
        </form>

    </div>
</div>

<script>
    layui.use(['form'],function () {

        var form=layui.form,
            layer=layui.layer,
            $= layui.$;

        form.render();

        function formInit() {
            form.val('majorModifyFormFilter',{
                "id":'${major.id}',
                "name":'${major.name}',
                "code":'${major.code}'
            })

            let url = 'CollegeServlet';
            let params = {method:'search'};
            let successFn = function (res) {
                res = JSON.parse(res);
                let json = res;
                let collegeId='${major.college.id}';
                for (let i=0;i<json.data.length;i++) {

                    if(json.data[i].id==collegeId){
                        $('#college').append("<option value='"+json.data[i].id+"' selected>"+json.data[i].name+"</option>");
                    }else{
                        $('#college').append("<option value='"+json.data[i].id+"'>"+json.data[i].name+"</option>");
                    }
                }

                //页面加载时，把院系的数据查询出来，并赋值给下拉框
                form.render('select');
            }
            $.get(url, params, successFn);
        }

        formInit();

        $("#name").blur(function(){
            var value = this.value;
            if(typeof value == "undefined" || value == null || value == ""){
                layer.msg("专业名称为必填项！",{icon:5});
            }else if(/^[\u4e00-\u9fa5]{2,15}$/.test(value)==false){
                layer.msg("专业名称为 2-15 个汉字!",{icon:5});
            }
        })
        $("#code").blur(function () {
            var value = this.value;
            var reg = /^\d{1,11}$/;
            if (typeof value == "undefined" || value == null || value == "") {
                layer.msg("院系编号为必填项！", {icon: 5});
            } else if (reg.test(value) == false) {
                layer.msg("院系代号为1-11 位的数字!", {icon: 5});
            }
        })
        form.verify({
            name:function (value) {
                if(/^[\u4e00-\u9fa5]{2,15}$/.test(value)==false){
                    return '专业名称为 2-15 个汉字'
                }
            },

            //不能有特殊字符和数字；可以输入英文，可以有空格，可以输入英文名字中的点，可以输入汉字，中文英文不能同时出现，长度在1-20
            code: function (value) {
                var reg = /^\d{1,11}$/;
                if (typeof value == "undefined" || value == null || value == "") {
                    return '院系编号为必填项！'
                } else if (reg.test(value) == false) {
                    return '院系代号为1-11 位的数字! '
                }
            }

        });

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        //监听提交
        form.on('submit(majorSaveBtn)', function (data) {
            let url = 'MajorServlet';
            let params = {method:'modify',
                id:data.field.id,
                college:data.field.college,
                name:data.field.name,
                code:data.field.code};
            let fn = function (res) {
                if (res == 'true') {
                    layer.close(layer.index);
                    layer.msg("修改成功",{icon: 1});
                    parent.layui.table.reload('currentTableId');
                }
            };
            $.post(url, params, fn);

            //return false;
        });

        $('#majorResetBtn').click(function () {
            formInit();
            layer.msg("信息重置成功",{icon: 1});
        })



    })
</script>

</body>
</html>